<form id="activityForm" name="activityForm"
      METHOD="POST" ACTION="<?= $_SERVER['PHP_SELF']; ?>"  onsubmit="return UTSDK.VALIDATION.validate('activityForm')">
    <input type="hidden" name="formSource" value="cActivity"/>
    <input type="hidden" name="action" value="create"/>
    <table>
        <tr>
            <td><label>Activity: </label></td>
            <td>
                <select id="activity" name="activity"
                        data-validation="select" data-validationmessage="Activity must be chosen"
                        data-required="false" data-default="null">
                    <option value="null">Create new</option>
                </select>
            </td>
            <td><label id="activityError"></label></td>
        </tr>
        <tr>
            <td><label>Activity Title: </label></td>
            <td><input id="activityTitle" type="text" name="activityTitle" placeholder="Activity Title"
                       data-validation="text" data-validationmessage="Must not be empty"/></td>
            <td><label id="activityTitleError"></label></td>
        </tr>
        <tr>
            <td><label>Activity Description: </label></td>
            <td><textarea id="activityDescription" type="text" name="activityDescription" placeholder="Activity Description"
                          data-validation="text" data-validationmessage="Must not be empty" data-maxlength="300"></textarea></td>
            <td><label id="activityDescriptionError"></label></td>
        </tr>
        <tr>
            <td><label>Start Time: </label></td>
            <td><input id="activityStartTime" type="text" name="activityStartTime" 
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time" data-required="false"/></td>
            <td><label id="activityStartTimeError"></label></td>
        </tr>
        <tr>
            <td><label>End Time: </label></td>
            <td><input id="activityEndTime" type="text" name="activityEndTime" data-after="activityStartTime"
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time" data-required="false"/></td>
            <td><label id="activityEndTimeError"></label></td>
        </tr>
        <tr>
            <td><label>Start Date: </label></td>
            <td><input id="activityStartDate" type="text" name="activityStartDate" 
                       placeholder="YYYY-MM-DD" onkeydown="UTSDK.VALIDATION.checkDateKeys(event)"
                       data-validation="date" data-required="false"/></td>
            <td><label id="activityStartDateError"></label></td>
        </tr>
        <tr>
            <td><label>End Date: </label></td>
            <td><input id="activityEndDate" type="text" name="activityEndDate" data-after="activityStartDate"
                       placeholder="YYYY-MM-DD" onkeydown="UTSDK.VALIDATION.checkDateKeys(event)"
                       data-validation="date" data-required="false"/></td>
            <td><label id="activityEndDateError"></label></td>
        </tr>
        <tr>
            <td><label>Event: </label></td>
            <td>
                <select id="activityEvent" name="activityEvent" data-default="null"
                        data-validation="select" data-validationmessage="No events in database">
                    <option value="null">none</option>
                </select>
            </td>
            <td><label id="activityEventError"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="submit" value="Submit" id="activitySubmit"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" style="display:none" type="button" value="Delete" id="activityDelete"/></td>
            <td></td>
        </tr>
    </table>
</form>
<script>
    var activityForm = (function() {
        window.addEventListener("load", function() {
            var json = {event: "all"};
            UTSDK.updateSelect(json, UTSDK.$("activityEvent"));
        });
    })();
</script>